// eslint-disable-next-line import/no-unresolved
import React, {Component} from 'react';
import {Row, Col} from 'antd';
import styles from './index.less';

class BellowEvaluation extends Component {

  state = {
    bellowEvaluation: {},
  };


  componentDidMount() {
  }

  // 监听父组件更改的数据
  static getDerivedStateFromProps(nextProps, prevState) {
    const {data} = nextProps;
    const {bellowEvaluation} = prevState;
    if (data && data !== bellowEvaluation) {
      return {
        bellowEvaluation: data,
      }
    }
    return null
  }

  setColor = evaluation => {
    if (evaluation === '正常') return {backgroundColor:"#98CC00"}
    return {backgroundColor:"#FB3838"}
  }


  render() {

    const {bellowEvaluation} = this.state;

    const {
      width = 100,
      height = 70
    } = this.props;

    return (
      <Row style={{width: `${width}%`, height}}>
        <Col span={12}>
          <Row style={{width: `${width}%`, height}}>
            <Col span={15} style={{paddingTop: '8%'}}>
              <div className={styles.bellowEvaluation}>
                烧结终点位置评价
              </div>
            </Col>
            <Col span={8} style={{paddingTop: '8%'}}>
              <div className={styles.bellowEvaluationResult} style={this.setColor(bellowEvaluation.location)}>
                {bellowEvaluation.location}
              </div>
            </Col>
          </Row>
        </Col>
        <Col span={12}>
          <Row style={{width: `${width}%`, height}}>
            <Col span={15} style={{paddingTop: '8%'}}>
              <div className={styles.bellowEvaluation}>
                烧结终点温度评价
              </div>
            </Col>
            <Col span={8} style={{paddingTop: '8%'}}>
              <div className={styles.bellowEvaluationResult} style={this.setColor(bellowEvaluation.temp)}>
                {bellowEvaluation.temp}
              </div>
            </Col>
          </Row>
        </Col>
      </Row>
    )
  }
}

export default BellowEvaluation
